<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        @keyup.enter.native="handleFilter"
        size="small"
        clearable
        style="width: 200px;"
        class="filter-item"
        placeholder="搜索关键字"
        v-model="queryParams.kw"
      ></el-input>

      <el-input
        @keyup.enter.native="handleFilter"
        size="small"
        clearable
        style="width: 200px;"
        class="filter-item"
        placeholder="会员号"
        v-model="queryParams.virtualcard"
      ></el-input>
      <el-date-picker
        size="small"
        v-model="queryParams.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期"
      ></el-date-picker>
      <el-date-picker
        size="small"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        v-model="queryParams.endTime"
        placeholder="选择结束日期"
      ></el-date-picker>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        v-if="~accessable.indexOf('wechat:auto_reply_history:export')"
        v-waves
        icon="el-icon-document"
        @click="exportExcelFile"
      >导出</el-button>
    </div>
    <el-table
      :height="tableHeight"
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" align="center" label="序号" width="80"></el-table-column>
      <el-table-column prop="virtualcard" align="center" label="会员号" width="140"></el-table-column>
      <el-table-column prop="keywords" align="center" label="关键字" width="220"></el-table-column>
      <el-table-column prop="content" align="center" label="回复内容" width="300">
        <template slot-scope="scope">
          <div>
            <div v-if="scope.row.typeId==0">{{scope.row.content}}</div>
            <div v-else>
              <img :src="scope.row.content" alt class="content-img" />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="回复时间" width="220">
        <template slot-scope="scope">
          <span>{{scope.row.createTime|timeFormat}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.page"
        :page-sizes="[10,20,30,50]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<style>
.content-img {
  height: 80px;
}
</style>
<script>
export default {
  data () {
    return {
      tableHeight: 0,
      total: 0,
      list: [],
      listLoading: false,
      queryParams: {
        page: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 300
    this.loadData()
  },
  methods: {
    handleFilter () {
      this.queryParams.page = 1
      this.loadData()
    },
    handleCurrentChange (page) {
      this.queryParams.page = page
      this.loadData()
    },
    handleSizeChange (size) {
      this.queryParams.pageSize = size
      this.loadData()
    },
    loadData () {
      this.listLoading = true
      this.$post('/wechat/wx-auto-reply-history/list', this.queryParams)
        .then(data => {
          this.listLoading = false
          this.list = data.rows
          this.total = data.total
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    templateTypeName (typeid) {
      let item = this.allTemplateTypes.filter(el => el.id == typeid)[0]
      if (item) {
        return item.name
      }
      return '';
    },
    exportExcelFile () {
      this.exportExcelWithForm(
        '/wechat/wx-auto-reply-history/export',
        this.queryParams
      )
    }
  }
}
</script>
